<template>
  <dv-scroll-board
      @click="clickfunc"
      :config="config"
      style="width:100%;height:100%;"
      ref="scrollBord"
  />
</template>

<script>
export default {
  data() {
    return {};
  },
  props: {
    info: {
      type: Object,
      default: () => {
        return {
          header: [],
          data: [
          ]
        };
      }
    },
    data: {
      type: Array,
      default: () => {
        return [];
      }
    },
    index: {
      type: Boolean,
      default: false
    },
    columnWidth: {
      type: Array,
      default: () => {
        return [];
      }
    },
    align: {
      type: Array,
      default: () => {
        return []
      }
    },
    rowNum: {
      type: Number,
      default: 5
    },
    headerHeight: {
      type: Number,
      default: 20
    },
    headerBGC: {
      type: String,
      default: 'rgb(8, 38, 111)'
    },
    isUpdate: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    config: {
      get() {
        return {
          header: this.info.header,
          data: this.data,
          index: this.index,
          columnWidth: this.columnWidth,
          align: this.align,
          rowNum: this.rowNum,
          headerHeight: this.headerHeight,
          headerBGC: this.headerBGC,
          waitTime:2000
        }
      },
      set(newValue) {
        return newValue;
      },
    },
    // config() {
    //     return {
    //         header: this.info.header,
    //         data: this.info.data,
    //         index: this.index,
    //         columnWidth: this.columnWidth,
    //         align: this.align,
    //         rowNum: this.rowNum,
    //         headerHeight: this.headerHeight,
    //         headerBGC: this.headerBGC
    //     }
    // },
  },
  methods: {
    clickfunc: function (val) {
      this.$emit("beClicked", val);
    },
  },
  watch: {
    info: function (val) {
      this.$refs['scrollBord'].updateRows(val.data, 4);
    },
    isUpdate: function () {
    }
  }
};
</script>

<style scoped>

</style>